/*
文件名称: chart.js
路径: frontend/static/js/chart.js
功能说明:
    拉取数据并渲染 Chart.js；在查询区折叠/展开时，调用 resize() 重绘图表。
    支持柱状图、折线图、饼图等多种图表类型，提供图表导出和报表跳转功能。
修改记录:
    2025-04-24 ★ 彻底简化图表高度的动态调整，移除冗余计算，确保图表展示无滚动问题。
    2025-05-20 ▲ 修复语法错误，优化饼图显示效果
    2025-01-27 ★ 增强错误处理和用户提示，添加详细函数注释
*/

/* ========== 全局配置 ========== */
"use strict";
window.CHART_COLORS = window.CHART_COLORS || {
  METRICS: {},
  GROUPS: {},
};

document.addEventListener("DOMContentLoaded", function () {
  "use strict";

  // ========== 全局变量定义 ==========
  var chartInstance = null;                    // 当前图表实例
  var chartCanvas = document.getElementById("analysisChart");  // 图表画布元素
  var loadingEl = document.getElementById("loading");          // 加载提示元素
  var collapseEl = document.getElementById("queryCollapse");    // 查询区域折叠元素
  var queryPanelEl = document.getElementById("queryPanel");    // 查询面板元素
  var currentChartData = null;                 // 当前图表数据（包含return_cache_key）
  var queryCollapse = bootstrap.Collapse.getOrCreateInstance(collapseEl, {
    toggle: false,
  });

  // ========== 错误处理工具函数 ==========
  
  /**
   * 显示用户友好的错误提示
   * @param {string} title - 错误标题
   * @param {string} message - 错误详细信息
   * @param {string} type - 错误类型 ('error', 'warning', 'info')
   */
  function showUserError(title, message, type = 'error') {
    console.error(`图表错误 - ${title}:`, message);
    
    // 使用SweetAlert2显示错误（如果可用）
    if (typeof Swal !== 'undefined') {
      Swal.fire({
        title: title,
        text: message,
        icon: type,
        confirmButtonText: '确定',
        confirmButtonColor: '#3085d6'
      });
    } else {
      // 降级到原生alert
      alert(`${title}: ${message}`);
    }
  }

  /**
   * 验证图表数据格式
   * @param {Object} data - 图表数据对象
   * @returns {boolean} 数据是否有效
   */
  function validateChartData(data) {
    if (!data) {
      showUserError('数据验证失败', '服务器返回的数据为空');
      return false;
    }
    
    if (!Array.isArray(data.labels)) {
      showUserError('数据格式错误', '图表标签数据格式不正确');
      return false;
    }
    
    if (!Array.isArray(data.datasets)) {
      showUserError('数据格式错误', '图表数据集格式不正确');
      return false;
    }
    
    if (data.datasets.length === 0) {
      showUserError('数据为空', '没有找到符合条件的数据，请调整查询条件');
      return false;
    }
    
    return true;
  }

  // ========== 界面控制函数 ==========
  
  /**
   * 显示加载状态
   */
  function showLoading() {
    if (loadingEl) {
      loadingEl.classList.remove("d-none");
      console.log("显示图表加载状态");
    }
  }

  /**
   * 隐藏加载状态
   */
  function hideLoading() {
    if (loadingEl) {
      loadingEl.classList.add("d-none");
      console.log("隐藏图表加载状态");
    }
  }

  // ========== 事件监听器设置 ==========
  
  // 取消按钮功能 - 重置所有查询条件
  var clearBtn = document.getElementById("clearBtn");
  if (clearBtn) {
    clearBtn.addEventListener("click", function() {
      try {
        // 清空选择框的值
        document.getElementById("templateSelect").value = "";
        document.getElementById("statTime").value = "";
        document.getElementById("reportNameInput").value = "";
        
        // 重置选择框到默认值
        document.getElementById("queryMode").value = "template";
        document.getElementById("chartType").value = "bar";
        
        // 清除URL中的缓存参数
        clearUrlCacheParams();
        
        console.log("所有查询条件已重置，已清除URL缓存参数");
        
        // 显示成功提示
        if (typeof Swal !== 'undefined') {
          Swal.fire({
            title: '重置成功',
            text: '所有查询条件已清空',
            icon: 'success',
            timer: 1500,
            showConfirmButton: false
          });
        }
      } catch (error) {
        console.error("重置查询条件失败:", error);
        showUserError('重置失败', '清空查询条件时发生错误');
      }
    });
  }

  // 查询按钮事件监听
  var showQueryBtn = document.getElementById("showQueryBtn");
  var searchBtn = document.getElementById("reportSearchBtn");
  if (searchBtn) {
    searchBtn.addEventListener("click", function () {
      try {
        console.log("开始执行图表查询");
        queryCollapse.hide();
        showQueryBtn.classList.remove("d-none");
        fetchChartData(true); // 用户主动查询，强制使用表单数据
      } catch (error) {
        console.error("查询按钮点击处理失败:", error);
        showUserError('查询失败', '执行查询时发生错误');
      }
    });
  }

  // 滚动时自动隐藏查询区域
  window.addEventListener("scroll", function () {
    if (window.scrollY > 50 && collapseEl.classList.contains("show")) {
      queryCollapse.hide();
    }
  });

  // 显示查询条件按钮
  if (showQueryBtn) {
    showQueryBtn.addEventListener("click", function () {
      queryCollapse.show();
      showQueryBtn.classList.add("d-none");
    });
  }

  // 查询区域折叠/展开时调整图表尺寸
  collapseEl.addEventListener("hidden.bs.collapse", function () {
    if (chartInstance) {
      console.log("查询区域隐藏，调整图表尺寸");
      chartInstance.resize();
    }
  });
  collapseEl.addEventListener("shown.bs.collapse", function () {
    if (chartInstance) {
      console.log("查询区域显示，调整图表尺寸");
      chartInstance.resize();
    }
  });

  // ========== 工具函数 ==========
  
  /**
   * 清除URL中的缓存相关参数
   */
  function clearUrlCacheParams() {
    const newUrl = new URL(window.location);
    newUrl.searchParams.delete('cache_key');
    newUrl.searchParams.delete('from_chart');
    newUrl.searchParams.delete('from_report');
    window.history.replaceState({}, '', newUrl);
    console.log("🧹 已清除URL缓存参数:", newUrl.toString());
  }

  // ========== 参数处理函数 ==========
  
  /**
   * 获取图表查询参数
   * @param {boolean} forceUseFormData - 是否强制使用表单数据
   * @returns {URLSearchParams} 查询参数字符串
   */
  function getChartQueryParams(forceUseFormData = false) {
    let params;
    try {
      // 首先检查URL中是否有cache_key（来自报表页面跳转）
      const urlParams = new URLSearchParams(window.location.search);
      const cacheKey = urlParams.get('cache_key');
      
      if (cacheKey && !forceUseFormData) {
        console.log("🔑 检测到cache_key，使用URL参数:", urlParams.toString());
        params = urlParams;
      } else if (window.getReportQueryParams) {
        params = window.getReportQueryParams();
        console.log("📋 使用组合查询参数:", params.toString());
        
        // 如果是用户主动查询，清除URL中的cache_key参数
        if (forceUseFormData && cacheKey) {
          console.log("🧹 用户主动查询，清除URL中的cache_key参数");
          const newUrl = new URL(window.location);
          newUrl.searchParams.delete('cache_key');
          newUrl.searchParams.delete('from_report');
          window.history.replaceState({}, '', newUrl);
        }
      } else {
        params = new URLSearchParams(window.location.search);
        console.log("🌐 使用URL查询参数:", params.toString());
      }

      const chartTypeEl = document.getElementById("chartType");
      if (chartTypeEl) {
        params.set("chart_type", chartTypeEl.value || "bar");
      }

      console.log("📊 最终查询参数:", params.toString());
      return params;
    } catch (error) {
      console.error("获取查询参数失败:", error);
      showUserError('参数错误', '获取查询参数时发生错误');
      return new URLSearchParams();
    }
  }

  /**
   * 初始化图表类型切换监听器
   */
  function initChartTypeListener() {
    const chartTypeEl = document.getElementById("chartType");
    if (chartTypeEl) {
      chartTypeEl.addEventListener("change", function () {
        try {
          console.log("📊 图表类型切换为:", chartTypeEl.value);
          if (chartInstance) {
            // 图表类型切换时，保持当前的数据源（缓存或表单）
            // 不强制使用表单数据，让fetchChartData自动判断
            fetchChartData(false); // false表示不强制使用表单数据
          }
        } catch (error) {
          console.error("图表类型切换失败:", error);
          showUserError('切换失败', '切换图表类型时发生错误');
        }
      });
    }
  }

  // 初始化图表类型监听器
  initChartTypeListener();

  // ========== 页面初始化时自动查询图表数据 ==========
  
  /**
   * 页面加载时自动检查URL参数并加载图表数据
   */
  function initAutoQuery() {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const cacheKey = urlParams.get('cache_key');
      const chartType = urlParams.get('chart_type');
      
      console.log("📊 页面初始化检查 - cache_key:", cacheKey, "chart_type:", chartType);
      
      // 如果有cache_key或其他查询参数，自动执行查询
      if (cacheKey || urlParams.has('query_mode') || urlParams.has('stat_time')) {
        console.log("✅ 检测到查询参数，自动执行图表查询");
        
        // 设置图表类型
        if (chartType) {
          const chartTypeEl = document.getElementById("chartType");
          if (chartTypeEl) {
            chartTypeEl.value = chartType;
          }
        }
        
        // 自动执行查询
        fetchChartData();
      } else {
        console.log("❌ 未检测到查询参数，等待用户手动查询");
      }
    } catch (error) {
      console.error("初始化自动查询失败:", error);
    }
  }
  
  // 执行初始化自动查询
  initAutoQuery();

  // ========== 核心数据获取和渲染函数 ==========
  
  /**
   * 获取图表数据并渲染图表
   * 这是图表模块的核心函数，负责从后端获取数据并转换为可视化图表
   * @param {boolean} forceUseFormData - 是否强制使用表单数据
   */
  function fetchChartData(forceUseFormData = false) {
    try {
      console.log("开始获取图表数据, forceUseFormData:", forceUseFormData);
      
      // 重置图表容器
      const container = document.getElementById("chartContent");
      if (!container) {
        throw new Error("图表容器元素不存在");
      }
      
      container.innerHTML = '<canvas id="analysisChart"></canvas>';
      chartCanvas = document.getElementById("analysisChart");
      
      // 销毁现有图表实例
      if (chartInstance) {
        chartInstance.destroy();
        chartInstance = null;
      }

      // 获取查询参数
      var params = getChartQueryParams(forceUseFormData);
      showLoading();

      // 发起API请求
      fetch("/api/chart?" + params.toString())
        .then(function (res) {
          if (!res.ok) {
            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
          }
          return res.json();
        })
        .then(function (data) {
          console.log("图表数据获取成功:", data);
          console.log("🔍 检查return_cache_key:", data.return_cache_key);
          
          // 保存当前图表数据（包含return_cache_key）
          currentChartData = data;
          
          // 验证数据格式
          if (!validateChartData(data)) {
            return;
          }
          
          // 检查是否有错误信息
          if (data.error) {
            showUserError('数据获取失败', data.error);
            return;
          }
          
          // 根据图表类型渲染
          if (data.chart_type === "pie") {
            renderPieCharts(data);
          } else {
            renderStandardChart(data);
          }
        })
        .catch(function (err) {
          console.error("图表数据获取失败:", err);
          let errorMessage = "图表加载失败";
          
          if (err.message.includes("HTTP 400")) {
            errorMessage = "请求参数错误，请检查查询条件";
          } else if (err.message.includes("HTTP 500")) {
            errorMessage = "服务器内部错误，请稍后重试";
          } else if (err.message.includes("Failed to fetch")) {
            errorMessage = "网络连接失败，请检查网络连接";
          }
          
          showUserError('数据获取失败', errorMessage);
        })
        .finally(function () {
          hideLoading();
        });
        
    } catch (error) {
      console.error("fetchChartData函数执行失败:", error);
      showUserError('图表渲染失败', '图表渲染过程中发生未知错误');
      hideLoading();
    }
  }

  /**
   * 渲染饼图（多环饼图网格布局）
   * @param {Object} data - 图表数据对象
   */
  function renderPieCharts(data) {
    try {
      console.log("开始渲染饼图");
      
      const container = document.getElementById("chartContent");
      container.innerHTML = '<div class="pie-grid"></div>';
      const grid = container.querySelector(".pie-grid");

      // 确保data.labels存在且是数组
      if (!data.labels || !Array.isArray(data.labels)) {
        throw new Error("饼图数据格式错误: labels字段缺失或格式不正确");
      }

      // 现代化配色方案
      const modernColors = [
        '#3b82f6', '#10b981', '#f59e0b', '#ef4444',
        '#8b5cf6', '#06b6d4', '#84cc16', '#f97316',
        '#ec4899', '#14b8a6', '#f43f5e', '#a855f7'
      ];

      data.labels.forEach((group, i) => {
        // 确保group存在
        if (!group) {
          console.warn("跳过空的组名:", i);
          return;
        }

        const groupDiv = document.createElement("div");
        groupDiv.className = "pie-group";
        groupDiv.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
        groupDiv.style.borderRadius = "12px";
        groupDiv.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
        groupDiv.style.border = "1px solid rgba(0, 0, 0, 0.05)";

        const title = document.createElement("h6");
        title.textContent = group;
        title.style.color = "#374151";
        title.style.fontWeight = "600";
        title.style.marginBottom = "15px";
        groupDiv.appendChild(title);

        const canvas = document.createElement("canvas");
        groupDiv.appendChild(canvas);
        grid.appendChild(groupDiv);

        // 计算当前分组的总和（groupTotal）
        const groupTotal = data.datasets.reduce((sum, dataset) => {
          return sum + (dataset.data[i] || 0);
        }, 0);

        try {
          new Chart(canvas.getContext("2d"), {
            type: "doughnut", // 使用环形图，更现代
            data: {
              labels: data.datasets.map((d) => d.label.split(" - ")[1]),
              datasets: [
                {
                  data: data.datasets.map((d, index) => d.data[i]),
                  backgroundColor: data.datasets.map((d, index) => {
                    return modernColors[index % modernColors.length];
                  }),
                  borderColor: '#fff',
                  borderWidth: 3,
                  hoverBorderWidth: 4,
                  originalLabels: data.datasets.map((d) => d.label),
                },
              ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              cutout: '60%', // 环形图中心空白
              plugins: {
                tooltip: {
                  backgroundColor: 'rgba(0, 0, 0, 0.8)',
                  titleColor: '#fff',
                  bodyColor: '#fff',
                  borderColor: 'rgba(255, 255, 255, 0.2)',
                  borderWidth: 1,
                  cornerRadius: 8,
                  displayColors: true,
                  callbacks: {
                    label: (ctx) => {
                      // 使用正确的 groupTotal 计算占比
                      const percentage =
                        groupTotal > 0
                          ? ((ctx.raw / groupTotal) * 100).toFixed(1)
                          : 0;
                      return `${ctx.dataset.originalLabels[ctx.dataIndex]}: ${
                        ctx.raw
                      } (${percentage}%)`;
                    },
                    afterBody: (ctx) => [group], // 分组名单独一行
                  },
                },
                legend: {
                  display: false // 使用自定义图例
                }
              },
              animation: {
                duration: 1000,
                easing: 'easeOutQuart'
              }
            },
          });
        } catch (chartError) {
          console.error(`渲染分组 ${group} 的饼图失败:`, chartError);
          showUserError('饼图渲染失败', `渲染分组 "${group}" 的饼图时发生错误`);
        }
      });
      
      console.log("饼图渲染完成");
      
    } catch (error) {
      console.error("饼图渲染失败:", error);
      showUserError('饼图渲染失败', error.message);
    }
  }

  /**
   * 渲染标准图表（柱状图、折线图）
   * @param {Object} data - 图表数据对象
   */
  function renderStandardChart(data) {
    try {
      console.log("开始渲染标准图表，类型:", data.chart_type);
      
      var cfg = buildChartConfig(data);
      if (data.chart_type === "pie") {
        chartCanvas.classList.add("pie-chart");
      } else {
        chartCanvas.classList.remove("pie-chart");
      }
      renderChart(cfg);
      renderCustomLegend(cfg.data.datasets);
      
      console.log("标准图表渲染完成");
      
    } catch (error) {
      console.error("标准图表渲染失败:", error);
      showUserError('图表渲染失败', '渲染标准图表时发生错误');
    }
  }

  /**
   * 渲染Chart.js图表
   * @param {Object} cfg - Chart.js配置对象
   */
  function renderChart(cfg) {
    try {
      if (chartInstance) {
        chartInstance.destroy();
      }
      
      // 设置canvas背景色
      chartCanvas.style.backgroundColor = 'white';
      chartInstance = new Chart(chartCanvas.getContext("2d"), cfg);
      
      console.log("Chart.js图表渲染成功");
      
    } catch (error) {
      console.error("Chart.js渲染失败:", error);
      showUserError('图表渲染失败', 'Chart.js渲染过程中发生错误');
    }
  }

  /**
   * 构建Chart.js配置对象
   * @param {Object} data - 图表数据对象
   * @returns {Object} Chart.js配置对象
   */
  function buildChartConfig(data) {
    try {
      const isBarChart = data.chart_type === "bar";
      const isLineChart = data.chart_type === "line";
      
      // 现代化配色方案
      const modernColors = [
        '#3b82f6', '#10b981', '#f59e0b', '#ef4444',
        '#8b5cf6', '#06b6d4', '#84cc16', '#f97316',
        '#ec4899', '#14b8a6', '#f43f5e', '#a855f7'
      ];
      
      // 为数据集分配颜色
      const datasets = data.datasets.map((dataset, index) => ({
        ...dataset,
        backgroundColor: modernColors[index % modernColors.length],
        borderColor: modernColors[index % modernColors.length],
        borderWidth: isLineChart ? 3 : 1,
        pointBackgroundColor: modernColors[index % modernColors.length],
        pointBorderColor: '#fff',
        pointBorderWidth: 2,
        pointRadius: isLineChart ? 6 : 0,
        pointHoverRadius: isLineChart ? 8 : 0,
        fill: isLineChart ? false : undefined,
        tension: isLineChart ? 0.4 : undefined
      }));
      
      const config = {
        type: data.chart_type || "bar",
        data: { 
          labels: data.labels, 
          datasets: datasets 
        },
        options: {
          responsive: true,
          maintainAspectRatio: false, // 允许图表自适应容器
          backgroundColor: 'transparent',
          layout: {
            padding: {
              top: 20,
              bottom: 20,
              left: 20,
              right: 20,
            },
          },
          plugins: {
            legend: { 
              display: false // 使用自定义图例
            },
            tooltip: {
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              titleColor: '#fff',
              bodyColor: '#fff',
              borderColor: 'rgba(255, 255, 255, 0.2)',
              borderWidth: 1,
              cornerRadius: 8,
              displayColors: true,
              callbacks: {
                label: function (ctx) {
                  try {
                    // 获取当前分组的总和（适用于柱状图）
                    const groupTotal = ctx.chart.data.datasets
                      .map((d) => d.data[ctx.dataIndex])
                      .reduce((a, b) => a + b, 0);

                    const percentage =
                      groupTotal > 0
                        ? ((ctx.raw / groupTotal) * 100).toFixed(1)
                        : 0;
                    return `${ctx.dataset.label}: ${ctx.raw} (${percentage}%)`;
                  } catch (error) {
                    console.error("Tooltip标签计算失败:", error);
                    return `${ctx.dataset.label}: ${ctx.raw}`;
                  }
                },
              },
            },
          },
          scales: {
            x: {
              ticks: { 
                padding: 10,
                color: '#6b7280',
                font: {
                  size: 12,
                  weight: '500'
                }
              },
              grid: { 
                display: true,
                color: 'rgba(107, 114, 128, 0.1)',
                drawBorder: false
              },
              border: {
                display: false
              }
            },
            y: {
              beginAtZero: true,
              ticks: { 
                padding: 10,
                color: '#6b7280',
                font: {
                  size: 12,
                  weight: '500'
                }
              },
              grid: {
                color: 'rgba(107, 114, 128, 0.1)',
                drawBorder: false
              },
              border: {
                display: false
              }
            },
          },
          animation: {
            duration: 1000,
            easing: 'easeOutQuart'
          },
          barPercentage: isBarChart ? 0.7 : 0.9,
          categoryPercentage: isBarChart ? 0.8 : 1.0,
        },
      };
      
      console.log("图表配置构建完成:", config.type);
      return config;
      
    } catch (error) {
      console.error("构建图表配置失败:", error);
      throw new Error("构建图表配置时发生错误");
    }
  }

  /**
   * 渲染自定义图例
   * @param {Array} datasets - 数据集数组
   */
  function renderCustomLegend(datasets) {
    try {
      const container = document.getElementById("chartTitleContainer");
      if (!container) {
        console.warn("图例容器不存在");
        return;
      }

      container.innerHTML = '<h5 id="chartTitle"></h5>';
      const legend = document.createElement("div");
      legend.className = "custom-legend-container";
      legend.style.cssText = `
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: 15px 0;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
      `;

      // 现代化配色方案
      const modernColors = [
        '#3b82f6', '#10b981', '#f59e0b', '#ef4444',
        '#8b5cf6', '#06b6d4', '#84cc16', '#f97316',
        '#ec4899', '#14b8a6', '#f43f5e', '#a855f7'
      ];

      const uniqueMetrics = [];
      datasets.forEach((d, index) => {
        const metric = d.label.split(" - ")[1];
        if (metric && !uniqueMetrics.includes(metric)) {
          uniqueMetrics.push(metric);
          const item = document.createElement("div");
          item.className = "legend-item";
          item.style.cssText = `
            display: flex;
            align-items: center;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
          `;
          
          const colorBox = document.createElement("span");
          colorBox.className = "legend-color";
          colorBox.style.cssText = `
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 8px;
            background: ${modernColors[index % modernColors.length]};
            border: 1px solid rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
          `;
          
          const label = document.createElement("span");
          label.textContent = metric;
          
          item.appendChild(colorBox);
          item.appendChild(label);
          
          // 添加悬停效果
          item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-1px)';
            this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
          });
          
          item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none';
          });
          
          legend.appendChild(item);
        }
      });

      container.appendChild(legend);
      console.log("自定义图例渲染完成，指标数:", uniqueMetrics.length);
      
    } catch (error) {
      console.error("渲染自定义图例失败:", error);
      // 图例渲染失败不影响主图表显示，只记录错误
    }
  }

  // ========== 导出和跳转功能 ==========
  
  /**
   * 导出图表为PNG图片
   */
  var exportBtn = document.getElementById("exportChartBtn");
  if (exportBtn) {
    exportBtn.addEventListener("click", function () {
      try {
        // 检查是否有图表实例
        if (!chartInstance && !document.querySelector('.pie-grid canvas')) {
          showUserError('导出失败', '请先生成图表');
          return;
        }
        
        console.log("开始导出图表");
        
        // 如果是饼图，导出第一个饼图
        if (document.querySelector('.pie-grid')) {
          var pieCanvases = document.querySelectorAll('.pie-grid canvas');
          if (pieCanvases.length > 0) {
            var firstChart = Chart.getChart(pieCanvases[0]);
            if (firstChart) {
              exportCanvasAsImage(pieCanvases[0], "pie_chart.png");
            }
          }
        } else {
          // 普通图表导出
          if (!chartInstance) {
            showUserError('导出失败', '请先生成图表');
            return;
          }
          exportCanvasAsImage(chartCanvas, "chart.png");
        }
        
        // 显示成功提示
        if (typeof Swal !== 'undefined') {
          Swal.fire({
            title: '导出成功',
            text: '图表已成功导出为PNG图片',
            icon: 'success',
            timer: 2000,
            showConfirmButton: false
          });
        }
        
      } catch (error) {
        console.error("图表导出失败:", error);
        showUserError('导出失败', '导出图表时发生错误');
      }
    });
  }

  /**
   * 将Canvas导出为图片
   * @param {HTMLCanvasElement} canvas - 要导出的Canvas元素
   * @param {string} filename - 文件名
   */
  function exportCanvasAsImage(canvas, filename) {
    try {
      // 创建临时canvas并强制设置白色背景
      var tempCanvas = document.createElement('canvas');
      tempCanvas.width = canvas.width;
      tempCanvas.height = canvas.height;
      var tempCtx = tempCanvas.getContext('2d');
      
      // 强制填充白色背景
      tempCtx.fillStyle = '#FFFFFF';
      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
      
      // 绘制原图表
      tempCtx.drawImage(canvas, 0, 0);
      
      var a = document.createElement("a");
      a.href = tempCanvas.toDataURL('image/png');
      a.download = filename;
      a.click();
      
      console.log("图表导出完成:", filename);
      
    } catch (error) {
      console.error("Canvas导出失败:", error);
      throw new Error("导出图片时发生错误");
    }
  }

  /**
   * 跳转到统计报表页面 - 优先使用缓存数据
   */
  var reportBtn = document.getElementById("toReportBtn");
  if (reportBtn) {
    reportBtn.addEventListener("click", function () {
      try {
        // 检查是否有return_cache_key
        if (currentChartData && currentChartData.return_cache_key) {
          console.log("使用缓存数据跳转到报表页面:", currentChartData.return_cache_key);
          window.location.href = `/report?cache_key=${currentChartData.return_cache_key}&from_chart=true`;
        } else {
          console.log("无缓存数据，使用URL参数跳转到报表页面");
          // 降级到URL参数传递
          const params = getChartQueryParams();
          params.delete("chart_type");
          const reportUrl = "/report?" + params.toString();
          window.location.href = reportUrl;
        }
        
      } catch (error) {
        console.error("跳转报表页面失败:", error);
        showUserError('跳转失败', '跳转到统计报表页面时发生错误');
      }
    });
  }
  
  // ========== 页面卸载清理 ==========
  
  /**
   * 页面卸载前清理工作
   */
  function cleanup() {
    // 注意：这里我们不自动清除缓存参数
    // 让用户可以通过刷新页面重新加载相同的数据
    // 只有在用户主动点击取消按钮时才清除
    console.log("📊 图表页面卸载，保留URL参数以支持刷新重载");
  }
  
  // 绑定页面卸载事件（仅用于日志记录）
  window.addEventListener('beforeunload', cleanup);
});